<template>
	<view class="root" :style="{ width, height }">
		<image :style="{ width, height }" class="posterImg" v-if="poster" :src="poster" mode="aspectFill"></image>
		<image :style="{ width, height }" class="posterImg" v-else src="@/static/image/chart/bg.jpg" mode="aspectFill"></image>
		<view :style="{ width, height }" @click="state = !state" class="box"><image class="playIcon" src="@/static/image/chat/play.png" mode="widthFix"></image></view>
		<video
			:id="videoId"
			:style="{ height, width: state ? '750rpx' : '1rpx' }"
			@pause="state = 0"
			@timeupdate="timeupdate"
			@fullscreenchange="fullscreenchange"
			class="video"
			:src="url"
			:ref="videoId"
		></video>
		<!-- <progress :style="{'top':height,width}" class="progress" :percent="currentTime?parseInt(currentTime/duration*100):0" show-info border-radius="5" active></progress> -->
	</view>
</template>

<script>
export default {
	created() {
		this.videoId = Date.now() + Math.ceil(Math.random() * 10000000) + '';
	},
	async mounted() {
		this.VideoContext = uni.createVideoContext(this.videoId);
	},
	methods: {
		fullscreenchange(e) {
			this.state = e.detail.fullScreen;
		},
		timeupdate(e) {
			console.log(e.detail);
			this.duration = e.detail.duration;
			this.currentTime = e.detail.currentTime;
		}
	},
	watch: {
		state(state, oldValue) {
			//console.log(state,'state');
			if (!state) {
				this.VideoContext.pause();
			} else {
				this.VideoContext.play();
				setTimeout(() => {
					this.VideoContext.requestFullScreen({ direction: this.direction });
				}, 10);
			}
		}
	},
	data() {
		return {
			VideoContext: {},
			state: false,
			currentTime: 0,
			duration: 0,
			videoId: '',
			canvasId: '',
			posterUrl: ''
		};
	},
	props: {
		poster: {
			type: [String, Boolean],
			default() {
				return '';
			}
		},
		url: {
			type: String,
			default() {
				return '';
			}
		},
		direction: {
			type: Number,
			default() {
				return 0;
			}
		},
		width: {
			type: String,
			default() {
				return '300rpx';
			}
		},
		height: {
			type: String,
			default() {
				return '300rpx';
			}
		}
	}
};
</script>

<script module="rdVideo" lang="renderjs">

import mixinVideo from '@/utils/video-poster.js'
  // 监听videos, 有更改调用rdVideo.getAllPoster方法获取视频封面
  export default {
    mixins: [mixinVideo]
  }
</script>
<style lang="scss" scoped>
.root {
	position: relative;
	width: 750rpx;
	height: 300px;
	overflow: hidden;
}
.posterImg,
.video,
.box {
	display: flex;
	width: 750rpx;
	height: 300px;
	//border: solid 1px red;absolute
	position: absolute;
}
.video {
	margin-left: -2000px;
}
.posterImg {
	//border: solid red 1px;
}
.box {
	justify-content: center;
	align-items: center;
}
.playIcon {
	width: 100rpx;
}
</style>
